<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="560px">
      <el-row>
        <el-form ref="form" label-width="80px">
          <el-form-item label="字段标题">
            <el-input placeholder="请输入模型标题" v-model="form.cnName"></el-input>
          </el-form-item>
          <el-form-item label="字段名称">
            <el-input placeholder="请输入模型名称" v-model="form.enName"></el-input>
          </el-form-item>
          <el-form-item label="字段类型">
            <el-select v-model="form.type" placeholder="请选择字段类型" :style="{ width: '100%' }">
              <el-option v-for="dict in dict.type.event_field_type" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="字段长度">
            <el-input placeholder="请输入字段长度" v-model="form.length"></el-input>
          </el-form-item>
          <el-form-item label="校验规则">
            <el-select v-model="form.rule" placeholder="请选择字段校验规则" :style="{ width: '100%' }">
              <el-option v-for="dict in fieldRules" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否必填">
            <el-radio v-model="form.required" :label="1">必填</el-radio>
            <el-radio v-model="form.required" :label="2">选填</el-radio>
          </el-form-item>
          <el-form-item label="默认值">
            <el-input placeholder="请输入模型名称" v-model="form.default"></el-input>
          </el-form-item>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="onSubmit">{{ isedit ? '确认修改' : '确认添加' }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dialogMixin from '@/mixins/dialogMixin.js';
import { addModelField, editModelField } from '@/api/system/eventModel';

export default {
  name: 'ModeleEdit',
  mixins: [dialogMixin],
  dicts: ["event_field_type"],
  components: {},
  data() {
    return {
      title: '编辑模型字段',
      form: {
        title: '',
        name: '',
        required: 1,
        sort: 0
      },
      fieldRules: [
        { label: '不校验', value: '1' },
        { label: '数字', value: '2' },
        { label: '时间', value: '3' },
        { label: '坐标', value: '4' },
      ],
      isedit: false,
      modelId: 0
    }
  },
  mounted() {
  },
  methods: {
    add(modelId, newIndex) {
      this.modelId = modelId;
      this.reset();
      this.form.sort = newIndex;
      this.show();
    },
    edit(data) {
      this.reset();
      this.form = Object.assign({}, data);
      this.isedit = true;
      this.show();
    },
    reset() {
      this.form = {
        title: '',
        name: '',
        sort: 0
      };
      this.isedit = false;
    },
    onSubmit() {
      if (this.isedit) {
        editModelField(this.form).then(res => {
          if (res.code == 200) {
            this.$modal.msgSuccess('字段修改成功');
            this.close();
            this.$emit('handleOk');
          } else {
            this.$modal.msgError('字段修改失败');
          }
        })
      } else {
        this.form.modelId = this.modelId;
        addModelField(this.form).then(res => {
          if (res.code == 200) {
            this.$modal.msgSuccess('字段添加成功');
            this.close();
            this.$emit('handleOk');
          } else {
            this.$modal.msgError('字段添加失败');
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>